<!-- 服务台 -->
<template>
	<Card>
		<template #head>
			<view class="u-flex">
				<view class="u-flex-2">
					服务台日报({{time | date('mm月dd日')}})
				</view>
				<view class="u-flex-1 time u-text-right">
					{{time | weekDay}} {{time | date('hh:MM')}}
				</view>
			</view>
		</template>
		<template #body>
			<CellDetail label="服务台人员:" :value="WorkUser | unitUpdate"></CellDetail>
			<CellDetail label="今日电话总数:" :value="PhoneNum"></CellDetail>
			<CellDetail label="已接:" :value="YiJie"></CellDetail>
			<CellDetail label="未接:" :value="WeiJie"></CellDetail>
			<CellDetail label="建单总数:" :value="JianDanZongShu"></CellDetail>
			<CellDetail label="服务台解决:" :value="FuWuTaiJieJue"></CellDetail>
			<CellDetail label="电话找人:" :value="DianHuaZhaoRen"></CellDetail>
			<CellDetail label="无效电话:" :value="WuXiaoDianHua"></CellDetail>
			<CellDetail label="未建单:" :value="WeiJianDan"></CellDetail>
		</template>
		<template #footer>
			<view class="u-flex u-padding-top-30 u-padding-bottom-30 u-border-top" @click="onClick">
				<view class="u-flex-4" style="color:#409EFF">
					查看更多详情
				</view>
				<view class="u-flex-1 u-text-right">
					<u-icon name="arrow-right" color="#98A5B3"></u-icon>
				</view>
			</view>
		</template>
	</Card>
</template>

<script>
	import Card from '@/components/card/components/cardBaseWrapper.vue'
	import CellDetail from '@/components/cell/itemDetail.vue'
	import PagesDeskRouterConfig from '@/pagesDesk/routerConfig.js'

	function handleUser(obj, numKey, arrKey) {
		if (obj) {

			let num = obj[numKey]
			let arr = []
			if (obj[arrKey] && obj[arrKey].length) {
				arr = obj[arrKey].map((item) => {
					return {
						gather: `${item.userName}${item.num}个`
					}
				})
				arr = arr.map((item) => item.gather)
			}
			if (num) {
				return `${num}个(${arr.join('、')})`
			}
			return `${num}个`
		}
		return ''
	}

	function unitUpdate(val = '') {
		return val.replace(',', '、')
	}
	export default {
		components: {
			Card,
			CellDetail
		},
		filters: {
			unitUpdate
		},
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}

			}
		},
		computed: {
			PhoneNum() {
				return this.data?.phoneNum || '暂无'
			},
			WorkUser() {
				return this.data?.workUser || '暂无'
			},
			YiJie() {
				return handleUser(this.data, 'answer', 'answerWorkOrderNum')
			},
			WeiJie() {
				return handleUser(this.data, 'notAnswer', 'notAnswerWorkOrderNum')
			},
			JianDanZongShu() {
				return handleUser(this.data, 'createOrder', 'createOrderWorkOrderNum')
			},
			FuWuTaiJieJue() {
				return handleUser(this.data, 'workMake', 'workMakeWorkOrderNum')
			},
			DianHuaZhaoRen() {
				return handleUser(this.data, 'phoneLook', 'phoneLookWorkOrderNum')
			},
			WuXiaoDianHua() {
				return handleUser(this.data, 'phoneInvalid', 'phoneInvalidWorkOrderNum')
			},
			WeiJianDan() {
				return handleUser(this.data, 'noCreateOrder', 'noCreateOrderWorkOrderNum')
			}
		},
		data() {
			return {
				time: new Date()
			}
		},

		methods: {

			onClick() {
				wx.navigateTo({
					url: PagesDeskRouterConfig.Index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.time {
		font-weight: 400;
		font-size: 28rpx;
		color: #C0C4CC;
	}
</style>
